<template>
  <div class="_container" style="height: auto; overflow: hidden; padding: 15px">
    <el-card>
      <el-card shadow="never" style="margin-bottom: 15px">
        <el-row style="line-height: 40px">
          <el-input style="width:260px" placeholder="分组"></el-input>
          <el-input style="width:260px" placeholder="接口名称"></el-input>
          <el-row style="float: right">
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" icon="el-icon-search">添加</el-button>
          </el-row>
        </el-row>
      </el-card>
      <el-table :data="data"  ref="multipleTable" size="small" stripe>
        <el-table-column width="55"></el-table-column>
        <el-table-column prop="group_name" label="分组" show-overflow-tooltip></el-table-column>
        <el-table-column prop="api_name" label="接口名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="任务描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cron" label="cron" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="任务状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0">待启动</el-tag>
            <el-tag type="primary" v-if="scope.row.status === 1">执行中</el-tag>
            <el-tag type="success" v-if="scope.row.status === 2">已停止</el-tag>
            <el-tag type="danger" v-if="scope.row.status === 3">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-link type="primary" @click="openForm(scope.row)">修改</el-link>
            <el-link type="primary" :value="12" @click="changeItem('是否开启任务？','HaveChecked',scope.row._id)">开启</el-link>
            <el-link type="success" @click="changeItem('是否关闭任务？','Unused',scope.row._id)">关闭</el-link>
            <el-link type="danger" @click="changeItem('是否删除任务？','HaveDeleted',scope.row._id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <nav style="text-align: center">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.pageInfo.page"
            :page-size="this.pageInfo.page_size"
            layout="total, sizes, prev, pager, next"
            :total="total"
        ></el-pagination>
      </nav>
      <el-dialog title="任务配置" :visible.sync="watchFormDialogVisible" width="50%" :modal-append-to-body="false" center>
        <Tasker :key=timer :form=row @listenToChildEvent="closeForm"></Tasker>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import utils from "../../assets/js/utils";
import {queryHandler} from "../../assets/js/task";
import Tasker from "./task-form.vue";

export default {
  name: "task-list",
  components: {Tasker},
  created() {
    this.query()
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        page_size: 10
      },
      total: 0,
      data: [],
      watchFormDialogVisible: false,
      row: {},
      timer: '',
    }
  },
  methods: {
    handleSizeChange: function (page_size) {
      this.pageInfo.page_size = page_size;
      this.query()
    },
    handleCurrentChange: function (page) {
      this.pageInfo.page = page;
      this.query()
    },
    query: function () {
      let that = this
      let page = that.pageInfo.page
      let page_size = that.pageInfo.pageSize
      let filter = {}
      if (!utils.isEmpty(that.pageInfo.api_name)) {
        filter['api_name'] = that.pageInfo.api_name
      }
      if (!utils.isEmpty(that.pageInfo.group_name)) {
        filter['group_name'] = that.pageInfo.group_name
      }
      queryHandler(filter, page, page_size).then((response) => {
        if (response.data.code === 0) {
          this.data = response.data.result.data
          this.total = response.data.result.total
        }
      })
    },
    changeItem: function (message, action, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        utils.updateStatus("task", action, id)
        this.query()
      }).catch(() => {
        this.$message({
          message: "已取消",
          type: "info"
        })
      })
    },
    openForm: function (row) {
      this.timer = new Date().getTime()
      this.row = row
      this.watchFormDialogVisible = true
      console.log(row)
    },
    closeForm: function (watchFormDialogVisible) {
      this.watchFormDialogVisible = watchFormDialogVisible
    }
  }
}
</script>

<style scoped>

</style>